<template>
    <div id="areaManage">
        <div class="title">
            <h1>区域管理</h1>
        </div>
        <el-form ref="areaData" :model="areaData" label-width="80px" :rules="rules" class="demo-ruleForm">
            <el-form-item label="活动区域:">
                <el-select v-model="areaData.areaId" placeholder="请选择活动区域" style="width: 150px" size="small"
                    @change="getAreaIdData">
                    <el-option v-for="(v, i) in areaIdData" :key="i" :label="v.name" :value="v.id">
                    </el-option>
                    <!-- <el-option label="全部" value="1"></el-option>
                    <el-option label="单人明区" value="2"></el-option>
                    <el-option label="单人暗区" value="3"></el-option>
                    <el-option label="双人明区" value="4"></el-option>
                    <el-option label="双人阅读区" value="5"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="桌子数量:">
                <el-input v-model="areaData.deskCount" style="width: 150px" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="1.当前区域名称:" label-width="120px">
                <span>{{ this.areaOldData.name }}</span>
            </el-form-item>
            <el-form-item label="新的区域名称:" label-width="120px" prop="newAreaName">
                <el-input v-model="areaData.newAreaName" style="width: 150px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="2.当前区域描述:" label-width="120px  ">
                <span>{{ this.areaOldData.remark }}</span>
            </el-form-item>
            <el-form-item label="新的区域描述:" label-width="120px">
                <el-input v-model="areaData.newDescription" style="width: 500px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="3.当前价格:" label-width="95px  ">
                <span>{{ this.areaOldData.price }}/h</span>
            </el-form-item>
            <el-form-item label="新的价格设定:" label-width="120px" prop="newPrice">
                <el-input v-model.number="areaData.newPrice" style="width: 90px;" size="small" clearable></el-input>
                <span style="margin-left: 8px;">/h</span>
            </el-form-item>
            <el-form-item class="btnClass">
                <el-button type="primary" @click="(sureChange('areaData'))" style="width: 200px; margin: 0;">确认修改
                </el-button>
            </el-form-item>

        </el-form>


    </div>
</template>

<script>
export default {
    data() {
        return {
            areaData: {
                areaId: 1,
                deskCount: '20',
                newAreaName: "",
                newDescription: "",
                newPrice: ""

            },
            areaOldData: {
                // name:"单人明区",
                // price:19.8,
                // remark:"我是一段放飞自我，并且可以五彩斑斓的白碾压五光十色的文字",

            },
            areaIdData: [],
            rules: {
                newAreaName: [
                    { required: true, message: '新区域名称不能为空！', },
                ],
                newPrice: [
                    { required: true, message: '价格设定不能为空！', },
                    { type: 'number', message: '价格设定为整数类型！' }
                ],
            }
        }
    },
    methods: {
        // 修改
        sureChange(ruleName) {
            // console.log(this.$refs[formName].validate)
            this.$refs[ruleName].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: "/area/updateArea",
                        method: "put",
                        data: {
                            id: this.areaData.areaId,
                            name: this.areaData.newAreaName,
                            price: this.areaData.newPrice,
                            remark: this.areaData.newDescription
                        }
                    }).then((res) => {
                        // console.log(res.data.code)
                        if (res.data.code == 0) {
                            this.$message.success("修改成功！");
                            this.$router.go(0)
                        } else {
                            this.$message.error("活动区域下拉框数据加载失败！");
                        }
                    });
                    // console.log(this.areaData)
                } else {
                    console.log('必填选项的数据含有空内容！');
                    return false;
                }
            });

        },
        // 区域下拉框数据
        areaIdType: function () {
            this.$axios({
                url: "/area/queryall",
                method: "get",
            }).then((res) => {
                if (res.data.code == 0) {
                    this.areaIdData = res.data.data;
                } else {
                    this.$message.error("活动区域下拉框数据加载失败！");
                }
            });
        },
        getAreaIdData: function () {
            this.$axios({
                url: "/area/queryall",
                method: "get",
                params: {
                    id: this.areaData.areaId
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    this.areaOldData = res.data.data[0];
                } else {
                    this.$message.error("活动区域下拉框数据加载失败！");
                }
            });
        },
    },
    mounted: function () {
        this.areaIdType()
        this.getAreaIdData()
    }
}
</script>

<style scoped lang="less">
#areaManage {
    margin: 0;
    padding: 0;

    & .title {
        text-align: left;
        line-height: 0;
    }

    &>.el-form {
        width: 800px;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        // outline: 1px solid red;
        margin-top: 20px;
    }

    .el-form-item {
        margin: 10px 0;
    }

    .btnClass button {
        position: relative;
        top: 20px;
        left: -60px;
    }
    /deep/ .el-form-item__error {
    width: 160px;
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 103%;
    left: 5px;
}
}
</style>